import {ActionType, PageContainer, ProTable} from "@ant-design/pro-components";
import React, {useRef, useState} from "react";
import {ProFormInstance} from "@ant-design/pro-form/lib";
import {Button, Tag} from "antd";
import {listQuestionByPage} from "@/services/ant-design-pro/questionController";
import {CreateQuestionForm} from "@/pages/User/Manage/componnets/CreateQuestionForm";
import {history} from "@umijs/max";

export default () => {

  const formRef = useRef<ProFormInstance>()
  const actionRef = useRef<ActionType>()
  const [pageRequest,setPageRequest] = useState<PageRequest>()

  const [createFormVisible,setCreateFormVisible] = useState(false)

  const columns = [
    {
      title: '标题',
      dataIndex: 'title',
      valueType: 'textarea',
      ellipsis: true,
    },
    {
      title: '标签',
      dataIndex: 'tags',
      valueType: 'textarea',
      ellipsis: true,
    },
    {
      title: '判题用例',
      dataIndex: 'judgeCase',
      valueType: 'textarea',
      ellipsis: true,
    },
    {
      title: '判题配置',
      dataIndex: 'judgeConfig',
      valueType: 'textarea',
      ellipsis: true,
    },
    {
      title: '内容',
      dataIndex: 'title',
      valueType: 'textarea',
      ellipsis: true,
    },
    {
      title: '示例代码',
      width: 100,
      dataIndex: 'sampleCode',
      valueType: 'textarea',
      ellipsis: true
    },
    {
      title: '题解',
      width: 100,
      dataIndex: 'answer',
      valueType: 'textarea',
    },
    {
      title: '通过率',
      width: 80,
      dataIndex: 'gender',
      hideInSearch: true,
      valueType: 'textarea',
    },
    {
      title: '难度',
      width: 80,
      dataIndex: 'level',
      valueType: 'textarea',
      tip: '标题过长会自动收缩',
      render:(text:any,record:any)=>{
        return <Tag title={record?.level}/>
      }
    },
    {
      title: '创建时间',
      width: 80,
      dataIndex: 'createTime',
      hideInSearch: true,
      valueType: 'date',
    },
    {
      title: '更新时间',
      width: 80,
      dataIndex: 'updateTime',
      hideInSearch: true,
      valueType: 'date',
    },
  ];

  const queryQuestionByPager = async (params:PageRequest) => {

    // 第一个参数 params 查询表单和 params 参数的结合
    // 第一个参数中一定会有 pageSize 和  current ，这两个参数是 antd 的规范
    setPageRequest({
      current:params?.current,
      pageSize:params?.pageSize
    })
    const searchParam = formRef?.current?.getFieldsValue();
    const res = await listQuestionByPage({
      ...params,
      ...searchParam
    })

    return {
      data: res?.data?.records,
      // success 请返回 true，
      // 不然 table 会停止解析数据，即使有数据
      success: res?.code === 200,
      // 不传会使用 data 的长度，如果是分页一定要传
      total: res?.data?.total,
    };
  }

  return (

    <PageContainer
      title={false}
      breadcrumbRender={false}
    >

      <ProTable<API.QuestionEntity, any>
        // params 是需要自带的参数
        // 这个参数优先级更高，会覆盖查询表单的参数
        headerTitle={false}
        toolBarRender={() => [
          <Button
            key="add"
            type={'primary'}
            onClick={()=>history.push({
              pathname: "/oj/create"
            })}
          >
            新建
          </Button>
        ]}
        formRef={formRef}
        actionRef={actionRef}
        params={{}}
        columns={columns as any}
        pagination={pageRequest}
        rowKey="id"
        search={{
          labelWidth: 100,
          span: 6,
        }}
        request={(params) => queryQuestionByPager(params)}
      />

      <CreateQuestionForm
        visible={createFormVisible}
        setVisible={setCreateFormVisible}
      />

    </PageContainer>

  )


}
